$(document).ready(function(){

// 隐藏元素显示*************************************************
    $("input").click(function(){
        $(this).css({
            "border-bottom":"1px solid #0058a3"
        }).prev().css("opacity","1")
        $(this).next().css("opacity","0")
    })
    $(":input").blur(function(){
        $(this).css({
            "border-bottom":"1px solid #0058a3"
        }).prev().css("opacity","0")
        if($(this).val() === ""){
            $(this).css({
                "border-bottom":"1px solid #E00751"
            }).next().css("opacity","1").text($(this).attr("data-value")+"不能为空")
            return false
        }
    })
// 表单验证*****************************************************

    // 姓名表单内容验证
    $("#name-input").blur(function(){
        if($(this).val() === ""){
            $(this).next().css("opacity","1").text($(this).attr("data-value")+"不能为空")
            return false
        }else{
            var reg = /(^[\u4e00-\u9fa5][\u4e00-\u9fa5]{2,3}$|^[a-zA-Z][a-zA-Z_]{5,19}$)/
            if(!reg.test($(this).val())){
                $(this).css({
                    "border-bottom":"1px solid #E00751"
                }).next().css("opacity","1").text("请输入3-4位汉字姓名或6-20位英文姓名，后者以下划线分隔")
                return false
            }else{
                $(this).next().css("opacity","0")
            }
        }
    })

    // 手机号表单内容验证
    $("#tel-input").blur(function(){
        if($(this).val() === ""){
            $(this).next().css("opacity","1").text($(this).attr("data-value")+"不能为空")
            return false
        }else{
            var reg = /^1[3-9]\d{9}$/
            if(!reg.test($(this).val())){
                $(this).css({
                    "border-bottom":"1px solid #E00751"
                }).next().css("opacity","1").text("请输入正确的手机号")
                return false
            }else{
                $(this).next().css("opacity","0")
            }
        }
    })
    
    // 密码表单内容验证
    $("#pwd-input").blur(function(){
        if($(this).val() === ""){
            $(this).next().css("opacity","1").text($(this).attr("data-value")+"不能为空")
            return false
        }else{
            var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/
            if(!reg.test($(this).val())){
                $(this).css({
                    "border-bottom":"1px solid #E00751"
                }).next().css("opacity","1").text("密码6-16位，字母开头，由字母、数字、下划线组成")
                return false
            }else{
                $(this).next().css("opacity","0")
            }
        }
        // 重复密码表单内容验证
        if($(this).val() !== $("#repwd-input").val()){
            $("#repwd-input").next().css("opacity","1").text("密码输入不一致")
            return false
        }else{
            $("#repwd-input").next().css("opacity","0")
        }
    })

    // 重复密码表单内容验证
    $("#repwd-input").blur(function(){
        if($(this).val() === ""){
            $(this).next().css("opacity","1").text("请确认密码")
            return false
        }else{
            if($(this).val() !== $("#pwd-input").val()){
                $(this).css({
                    "border-bottom":"1px solid #E00751"
                }).next().css("opacity","1").text("密码输入不一致")
                return false
            }else{
                $(this).next().css("opacity","0")
            }
        }
    })
    
// 发送ajax***************************************************
    
    $(".sign-up-button").click(function(){
        var loadMask = $("<div>注册中 . . .</div>").css({
            width:"100%",
            height:"100%",
            background:"#fff",
            opacity:"0.8",
            position:"fixed",
            top:"0",
            left:"0",
            "text-align":"center",
            "line-height":"500px",
            color:"#0058a3",
            fontSize:"32px",
            "font-weight":"700"
        })
        $("body").append(loadMask)
        // 每次点击在ajax发送成功之前禁用提交按钮
        // $(this).prop("disabled",true)
        $.post("./php/sign_up.php",$('form').serialize(),res=>{
            var {meta:{status}} = res
            if(status === 2){
                loadMask.text("注册成功")
                $(location).attr('href', 'http://localhost/$$IKEA/junhao-planet/src/index.html');
            }else if(status === 1){
                loadMask.text("用户名被占用")
                setTimeout(function(){
                    loadMask.remove()
                },1000)
            }else{
                loadMask.text("注册失败")
                setTimeout(function(){
                    loadMask.remove()
                },1000)
            }
        },"json")
    })
});
